<template>
  <!-- 系统菜单资源目录 首页 -->
  <el-dialog
    v-el-drag-dialog
    title="系统菜单资源目录详情"
    :visible.sync="crud.status.info > 0"
    :before-close="crud.closeInfo"
  >
    <div class="info_detail_dialog__body">
      <el-card v-loading="crud.infoLoading" class="box-card" shadow="hover">
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">详情ID: </div><div class="info_detail_value">{{ info.id }}</div></el-col>
          <!-- 菜单名字  -->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">菜单名字: </div><div class="info_detail_value">{{ info.title || '-' }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">菜单编码(组件名称): </div><div class="info_detail_value">{{ info.code || '-' }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">菜单url: </div><div class="info_detail_value">{{ info.path || '-' }}</div></el-col>
          <!-- 上级信息 -->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">上级菜单 : </div><div class="info_detail_value">{{ info._parentInfo.title || '-' }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">子节点数目: </div><div class="info_detail_value">{{ info.subCount || '-' }}</div></el-col>
          <!-- 图标样式  -->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">图标样式: </div>
            <div class="info_detail_value">
              <span v-if="info.icon && info.icon.startsWith('el-icon')">
                <i :class="info.icon" />
              </span>
              <span v-else-if="info.icon">
                <svg-icon :icon-class="info.icon" />
              </span>
            </div>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">上传图标路径: </div><div class="info_detail_value">{{ info.imgPath || '-' }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">权限代码: </div><div class="info_detail_value">{{ info.permission || '-' }}</div></el-col>
          <!-- 类型   1：目录   2：菜单   4：按钮 -->
          <!-- 智能推断为字典类型, 字典类型为 dict.sys_menu_menu_type -->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">类型: </div>
            <div class="info_detail_value">{{ (info.menuType ===1 || info.menuType===2)?'目录菜单':info.menuType===4?'按钮':'未知类型'+info.menuType }}</div>
          </el-col>
          <!-- 菜单适配类型(1：PC端 2：移动端 ) -->
          <!-- 智能推断为字典类型, 字典类型为 dict.sys_menu_menu_adap -->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">菜单适配类型:</div><div class="info_detail_value">{{ info.menuAdap===1?'PC端':info.menuAdap===2?'移动端':info.menuAdap===4?'PC端+移动端':'未知' }}</div></el-col>
          <!-- 智能推断为字典类型, 字典类型为 dict.sys_menu_is_outside -->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">是否是外接: </div><div class="info_detail_value">{{ info.isOutside===0?'内部链接':(info.isOutside===1 && info.openType ===1)?'外部外链':(info.isOutside===1 && info.openType ===2)?'内嵌外链':'外链?' }}</div></el-col>
          <!-- web端打开方式，1：当前页面框架中打开， 2：新页面打开 -->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">打开方式: </div><div class="info_detail_value">{{ info.openType===2?'内嵌标签打开': '外部跳转打开' }}</div></el-col>
          <!-- 系统编号  -->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">系统编号: </div><div class="info_detail_value">{{ info.sysCode || '-' }}</div></el-col>
          <!-- 是否是不可用的，0 不可用，1可用  -->
          <!-- 智能推断为字典类型, 字典类型为 dict.sys_menu_is_enable -->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">是否启用: </div><div class="info_detail_value">{{ info.status ===1?'启用':'禁用' }}</div></el-col>
          <!--<el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">系统id: </div><div class="info_detail_value">{{ info.topId || '-' }}</div></el-col>-->
          <!-- 排序  -->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">排序: </div><div class="info_detail_value">{{ info.paixu || '-' }}</div></el-col>
          <!--<el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">部门id: </div><div class="info_detail_value">{{ info.depId || '-' }}</div></el-col>-->
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">备注: </div><div class="info_detail_value">{{ info.remark || '-' }}</div></el-col>

          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">创建时间:</div><div class="info_detail_value">{{ info.createTime || '-' }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">创建人:</div><div class="info_detail_value">{{ info.createUserName || '-' }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">最后一次修改时间:</div><div class="info_detail_value">{{ info.updateTime || '-' }}</div></el-col>
          <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">最后一次修改人:</div><div class="info_detail_value">{{ info.updateUserName || '-' }}</div></el-col>
          <!-- <el-col :xs="24" :sm="12" :md="8"><div class="info_detail_name">是否被删除数据:</div><div class="info_detail_value">{{ info.isDel?'否':'是' }}</div></el-col> -->

        </el-row>

      </el-card>
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import CRUD, { info } from '@crud/crud'
// 系统菜单资源目录 - model
const defaultInfo = {
  id: null, // id
  title: null, // 菜单名字
  code: null, // 菜单编码，解决前后端分离时为组成名称
  path: null, // 菜单url
  parentId: '0',
  _parentInfo: {}, // 父类信息
  subCount: null, // 子节点数目
  icon: null, // 图标样式
  imgPath: null, // 上传图标路径
  permission: null, // 权限代码，尽可能保证唯一性
  menuType: null, // 类型   1：目录   2：菜单   4：按钮
  menuAdap: null, // 菜单适配类型(1：PC端 2：移动端 )
  isOutside: null, // 是否是外接系统,0:内网资源，1是外接资源，外链资源
  openType: null, // web端打开方式，1：当前页面框架中打开， 2：新页面打开
  sysCode: null, // 系统编号
  isEnable: null, // 是否是不可用的，0 不可用，1可用
  topId: null, // 系统id
  paixu: 1,
  depId: null, // 部门id
  remark: null, // 备注
  lockVersion: 0,
  createTime: null,
  createUserName: null,
  updateTime: null,
  updateUserName: null,
  // _parentInfo: {},
  isDel: 0

}
export default {
  directives: { elDragDialog },
  mixins: [info(defaultInfo)],
  data() {
    return {

    }
  },
  mounted() {
  },
  methods: {
    [CRUD.HOOK.afterDoInfo]() {
      if (this.info.parentId && this.info.parentId !== '0') {
        this.crud.crudMethod.info(this.info.parentId).then(res => {
          this.info._parentInfo = res.data
        }).catch((error) => {
          this.crud.notify('未找到上级信息', CRUD.NOTIFICATION_TYPE.ERROR)
          console.log(error)
        })
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
